<style rel="stylesheet/scss" lang="scss" scoped>
.mid {
  line-height: 140px;
}
.alignR {
  margin: 0 !important;
  height: 0;
  .btn-request {
    position: relative;
    top: -90px;
    width: 120px;
  }
}
.col-20 {
  font-size: 14px;
  color: #333;
  line-height: 300%;
  width: 20%;
}
.el-tabs-cert {
  .el-tabs__content {
    padding: 20px !important;
  }
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip">
      <template>
        <el-form :inline="true" class="filter">
          <el-form-item label="">
            <el-select placeholder="证书种类" v-model="searchParams.certCategoryId" clearable>
              <el-option v-for="option in filter.gories" :key="option.id" :label="option.name" :value="option.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-cascader :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="searchParams.productCategory" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入产品型号" v-model="searchParams.plmModelNo" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入证书编号" v-model="searchParams.certNo" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="认证地区" v-model="searchParams.certArea" clearable>
              <el-option v-for="option in filter.certArea" :key="option.id" :label="option.labelZhCh" :value="option.labelZhCh">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入认证机构" v-model="searchParams.certOrg" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="使用标准" v-model="searchParams.certStandardId" clearable>
              <el-option v-for="option in filter.standards" :key="option.id" :label="option.name" :value="option.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="持证单位" v-model="searchParams.certLicensedUnitId" clearable>
              <el-option v-for="option in filter.units" :key="option.id" :label="option.name" :value="option.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入生产厂家" v-model="searchParams.certManufacturer" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select placeholder="证书状态" v-model="searchParams.statusCode" clearable>
              <el-option v-for="option in filter.certStatus" :label="option.labelZhCh" :value="option.labelZhCh" :key="option.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width: 200px;" class="filter-item" placeholder="请输入申请人" v-model="searchParams.createUserName" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button class="filter-item" type="success" icon="search" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
    </div>

    <cert-detail ref="certDetail" type="cert"></cert-detail>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
import * as baseApi from "@/api/common/index";
import * as prodApi from "@/api/product/index";
import * as certApi from '@/api/cert/index'
import * as questApi from "@/api/cert/quest/index";
import BasicForm from "@/components/BasicForm/index";
import CustomCard from "@/components/CustomCard/index";
import UploadList from "@/components/UploadList/index";
import CertDetail from "@/components/CertDetail/index";
export default {
  name: "user",
  components: {
    BasicForm,
    CustomCard,
    UploadList,
    CertDetail
  },
  data() {
    return {
      filter: {
        gories: [],
        units: [],
        standards: [],
        certStatus: [],
        certArea: [],
        cert_area: []
      },
      searchParams: {},
      categoryList: [],
      activeCard: "first",
      productCategory: [],
      //查询结果列表
      pageData: {
        params: {
          page: 1,
          limit: 10,
          total: 100
        },
        list: []
      },
      certInfo: {
        basic: {
          info: [
            {
              label: "证书编号",
              name: ""
            },
            {
              label: "证书有效期",
              name: ""
            },
            {
              label: "产品类型",
              name: ""
            },
            {
              label: "产品型号",
              name: ""
            },
            {
              label: "产品名称",
              name: ""
            },
            {
              label: "认证种类",
              name: ""
            },
            {
              label: "认证地区",
              name: ""
            },
            {
              label: "认证机构",
              name: ""
            },
            {
              label: "生产厂家",
              name: ""
            },
            {
              label: "使用标准",
              name: ""
            },
            {
              label: "持证单位",
              name: ""
            },
            {
              label: "证书状态",
              name: ""
            },
            {
              label: "申请人",
              name: ""
            },
            {
              label: "申请日期",
              name: ""
            },
            {
              label: "版本号",
              name: ""
            },
            {
              label: "备注",
              name: ""
            }
          ]
        },
        report: {
          list: [
            {
              label: "证书编号",
              name: ""
            },
            {
              label: "报告编号",
              name: ""
            },
            {
              label: "报告有效期",
              name: ""
            },
            {
              label: "报告状态",
              name: ""
            },
            {
              label: "使用标准",
              name: ""
            },
            {
              label: "相关参数",
              name: ""
            },
            {
              label: "版本号",
              name: ""
            }
          ]
        }
      }
    };
  },
  created() {
    this.getPdsConfCategoryTree();
    this.getPdsConfCategoryTree();
    this.getGories();
    this.getUnits();
    this.getStandards();
    this.getcertStatus();
    this.getcertArea();
    // this.getDict();
    // this.getList();
  },
  computed: {
    ...mapGetters(["elements", "language"])
  },
  methods: {
    //  产品类别
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        this.productCategory = res.data;
      });
    },
    //  证书种类
    getGories() {
      questApi.gories().then(res => {
        this.filter.gories = res.data;
      });
    },
    //  使用标准
    getStandards() {
      certApi.getStandards().then(res => {
        this.filter.standards = res.data;
      });
    },
    //  持证单位
    getUnits() {
      questApi.units().then(res => {
        this.filter.units = res.data;
      });
    },
    //  证书状态
    getcertStatus() {
      let params = "cert_dict_cstatus";
      questApi.certStatus(params).then(res => {
        this.filter.certStatus = res.data.rows;
        console.log(res.data);
      });
    },
    //  认证地区
    getcertArea() {
      let params = "cert_cert_area";
      questApi.certArea(params).then(res => {
        this.filter.certArea = res.data.rows;
        console.log(res.data);
      });
    },
    search() {
      this.$refs.certDetail.search(this.searchParams);
    },
    //  查询结果数据
    getList() {
      const params = Object.assign({}, this.pageData.params);
      delete params.total;
      questApi.getList(params).then(response => {
        if (response.code === 200) {
          this.pageData.list = response.data.rows;
          this.pageData.params.total = response.data.total;
        }
      });
    },
  }
};
</script>
